<template>
  <div class="notifications-page">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="(item, index) in notifications"
          :key="index"
          :title="item.title"
          :label="item.content"
          :value="item.time"
          @click="handleNotificationClick(item)"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

const notifications = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)

// 模拟通知数据 - 后续需要替换为真实API获取的数据
const mockNotifications = [
  {
    id: 1,
    title: '系统通知',
    content: '您有一条新的系统消息',
    time: '2025-06-18 15:30',
    type: 'system'
  },
  {
    id: 2,
    title: '课程提醒',
    content: '您的课程《计算机科学》即将开始',
    time: '2025-06-18 10:15',
    type: 'course'
  }
]

// 点击返回按钮
const onClickBack = () => {
  router.back()
}

// 加载更多通知
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      notifications.value = []
      refreshing.value = false
    }

    // 直接使用模拟数据，不重复添加
    if (notifications.value.length === 0) {
      notifications.value = [...mockNotifications]
    }
    loading.value = false
    finished.value = true // 标记加载完成
  }, 1000)
}

// 下拉刷新
const onRefresh = () => {
  // 清空列表数据
  finished.value = false

  // 重新加载数据
  loading.value = true
  onLoad()
}

// 处理通知点击
const handleNotificationClick = (item) => {
  switch(item.type) {
    case 'system':
      // 跳转到系统通知详情页
      router.push({
        name: 'system-notification-detail',
        params: { id: item.id }
      })
      break
    case 'course':
      // 跳转到课程详情页
      router.push({
        name: 'course-detail', 
        params: { id: item.id }
      })
      break
    default:
      showToast(`未知通知类型: ${item.type}`)
  }
}
</script>

<style scoped>
.notifications-page {
  min-height: 100vh;
  background-color: #f7f8fa;
}

:deep(.van-cell__title) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.van-cell__label) {
  margin-top: 4px;
  color: #969799;
  font-size: 14px;
}

:deep(.van-cell__value) {
  color: #969799;
  font-size: 12px;
}
</style>
